﻿@{
    ViewData["Title"] = "详情";
    Layout = "_SubLayout";
}
<div>
    <el-form :model="dialogForm" :rules="dialogRules" ref="dialogForm" size="small" label-width="8em" class="box-flex" v-loading="loading">
        <el-row>
            <el-col :span="12">
                <el-form-item prop="code" label="编码">
                    <el-input v-model="dialogForm.code" autocomplete="off" placeholder="请输入内容"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item prop="name" label="名称">
                    <el-input v-model="dialogForm.name" autocomplete="off" placeholder="请输入内容"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item prop="dbType" label="数据库类型">
                    <el-select v-model="dialogForm.dbType" placeholder="请选择数据库类型">
                        <el-option :key="parseInt(1)" label="SqlServer" :value="parseInt(1)"></el-option>
                        <el-option :key="parseInt(4)" label="PostgreSQL" :value="parseInt(4)"></el-option>
                        <el-option :key="parseInt(0)" label="MySql" :value="parseInt(0)"></el-option>
                        <el-option key="parseInt(5)" label="Dm" value="parseInt(5)"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="20">
                <el-form-item prop="connectionString" label="链接字符串">
                    <el-input type="textarea" :rows="3" v-model="dialogForm.connectionString" placeholder="请输入链接字符串" autocomplete="off"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="20">
                <el-form-item prop="remark" label="备注">
                    <el-input type="textarea" :rows="2" v-model="dialogForm.remark"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>

</div>

@section Scripts {
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    loading: false,
                    dialogFormVisible: false,
                    dialogForm: { id: 0, code: '', name: '', connectionString: '', dbType: 1, remark: '', status: 0 },
                    dialogInitForm: { id: 0, code: '', name: '', connectionString: '', dbType: 1, remark: '', status: 0 },

                    dialogRules: {
                        code: [{ required: true, message: '请输入编码', trigger: 'blur' }, { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }],
                        name: [{ required: true, message: '请输入名称', trigger: 'blur' }, { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }],
                        connectionString: [{ required: true, message: '请输入链接字符串', trigger: 'blur' }],
                    },
                }
            },
            created() {
                let that = this;
                this.loadFunc("submitForm");
            },
            methods: {
                editDialogForm(index, row) {
                    var that = this;
                    that.dialogForm = that.dialogInitForm;
                    this.$.get("/dbmanage/getdatabyid/" + row.id).then(function (res) { if (res.data.code == 200) { that.dialogForm = res.data.data; } });
                },
                TestConnstr() {
                    var that = this;
                    that.loading = true;
                    that.$refs["dialogForm"].validate((valid) => {
                        if (valid) {
                            that.$.post("/dbmanage/TestConnstr", that.dialogForm).then(function (res) {
                                if (res.data.code == 200) {
                                    ELEMENT.MessageBox.alert(res.data.message, "系统信息", { type: 'success', callback: () => { } });
                                } else {
                                    ELEMENT.MessageBox.alert(res.data.message, "系统信息", { type: 'error', callback: () => { } });
                                }
                                that.loading = false;
                            });
                        }
                    });
                },
                loadFunc(funcName) {
                    window[funcName] = (v) => {
                        this[funcName](v);
                    };
                },
                frameVisible(parentVueName) {
                    window.parent[parentVueName].$data.dialogVisible = false;
                },
                submitForm(data) {
                    console.log(data)
                    var that = this;
                   
                    that.$refs["dialogForm"].validate((valid) => {
                        if (valid) {
                            that.$.post("/dbmanage/savedata", that.dialogForm).then(function (res) {
                                if (res.data.code == 200) {
                                    ELEMENT.MessageBox.alert(res.data.message, "系统信息", {
                                        type: 'success', callback: () => {
                                            this.frameVisible("myvue");
                                        }
                                    });
                                } else {
                                    ELEMENT.MessageBox.alert(res.data.message, "系统信息", { type: 'error', callback: () => { } });
                                }
                                that.loading = false;
                            });
                        } else {
                            that.loading = false;
                        }
                    });
                }
            }
        });

    </script>

}